<template>
	<view class="container wrap">		
		<!-- #ifndef APP-PLUS -->
		<!-- <view v-if="isShow"><popup ref="mapState" protocolPath='../login/agreement?type=3'  policyPath='../login/agreement?type=4'  @popupState="popupState"></popup></view>			 -->
		<!-- #endif -->
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="header fiexd-head">
			<scroll-view scroll-x="true" class="nav" :scroll-left="navScrollLeft" scroll-with-animation="true">
				<block v-for="(item,index) in navData" :key="index">
					<view @click="toTiao(index)" class="nav-item" :class="[currentTab == index ? 'active' : '']" :data-current="index" data-id="1">{{ item.text }}</view>
				</block>
			</scroll-view>
		</view>
			<view v-show="false">
				<u-tabs-swiper ref="uTabs" :list="tabNav" :current="current" @change="tabsChange" :is-scroll="false"
				 swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :indicator-dots="false" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(v, e) in tabNav" :key="e">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">		
					<!-- #ifndef H5 -->
					<view style="height:82rpx;"></view>
					<!-- #endif -->
						<view class="u-flex u-row-center u-m-50" v-if="tabNav != undefined && tabNav[e].list.length == 0" style="flex-direction: column;">
							<image style="width:300rpx;height:300rpx;margin-top:50rpx;" mode="widthFix" src="../../static/img/no.png"></image>
							<text style="color:#ccc">暂无数据</text>
						</view>
						<view @click="detailCompany(e < 2?item.userId:item.id)" v-if="tabNav[e].list != null && tabNav[e].list != null && item.name != ''" class="f-list u-flex u-m-b-20" v-for="(item, index) in tabNav[e].list" :key="index">
							<view class="f-logo" v-if="e < 2" :style="{ backgroundImage: 'url(' + (item.imgUrl != null ? baseUrl+item.imgUrl : defaultLogo )+ ')' }"><image :src="logoMask" mode="aspectFill"></image></view>
							<view v-else class="f-logo team-logo" :style="{ backgroundImage: 'url(' + logoMask + ')' }"><text class="u-line-2 u-p-l-5 u-p-r-5">{{item.name}}</text></view>	
							<view class="f-item u-m-l-32">
								<block v-if="e == 0">
								<view class="title u-m-t-12">{{ item.name }}</view>
								<view class="desc u-m-t-20 u-m-b-20" ><block v-if="item.corporateIdentity">{{ item.corporateIdentity }}|</block><block v-if="item.industry && item.industry != 'null'"> {{ item.industry }}|</block><block v-if="item.scale != null && item.scale != '请选择' "> {{ item.scale }}人|</block><block v-if="item.specials"> {{ item.specials }}</block></view>
								</block>
								<block v-if="e == 1">
								<view class="title u-m-t-12">{{ item.cardName }}</view>
								<view class="desc u-m-t-20 u-m-b-20"> <block v-if="item.industry">{{ item.industry }}|</block><block v-if="item.school">{{ item.school }}|</block><block v-if="item.userIdentify">{{ item.userIdentify }}</block></view>
								</block>
								<block v-if="e == 2">
								<view class="title u-m-t-12">{{ item.name }}</view>
								<view class="desc u-m-t-20 u-m-b-20" v-if="item.demand != undefined"> <block v-if="item.demand.leaderArea">{{ item.demand.leaderArea }}|</block><block v-if="item.demand.num">{{ item.demand.num}}|</block><block v-if="item.demand.teamType"> {{ item.demand.teamType}}</block></view>
								</block>
								<view class="tips u-flex u-row-around">
									<text class="u-m-r-16" v-for="(v, idx) in item.field" :key="idx">{{ v }}</text>
								</view>
							</view>
						</view>
						<u-loadmore v-if="tabNav[e].list != null && tabNav[e].list != null" :status="loadStatus[e]" bgColor="#f4f4f4"></u-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>
		<block v-if="token == '' || token == undefined">
		<view class="mask-login u-flex u-row-around">
			<text class="u-m-l-40">登录后开启私人订制服务</text>
			<view @click="login" class="btn-login">马上登录</view>
		</view>
		<navigator url="/pages/tabBar/release" open-type="switchTab" class="btn-bottom">马上发布需求</navigator>
		</block>
		<block v-else>
		<view v-show="havTip" class="mask-tips u-flex u-row-around">
			<text class="u-m-l-40">试试往左或往右滑动屏幕</text>
			<view @click="closeTips" class="btn-login">知道了</view>
		</view>
		</block>
		<u-toast ref="uToast" />
		<city-select v-model="cityActive" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
var bitmap1=null;
// import popup from '@/components/DuDu-popup/DuDu-popup.vue'
import citySelect from '../follow/components/u-city-select.vue';
export default {
	components:{
		citySelect,
		// popup
	},
	data() {
		return {
			isShow:false,
			havTip:true,
			tabNav: [{
				name: '企业',
				list:[],
				reqBody:{
					index: 1,
					size: 10,
					type: 'qy'
				}
			}, {
				name: '个人',
					list:[],
				reqBody:{
					index: 1,
					size: 10,
					type: 'gr'
				}
			}, {
				name: '团队',
					list:[],
					reqBody:{
					index: 1,
					size: 10,
					type: 'td'
				}
			}],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore','loadmore','loadmore'],
			baseUrl:this.$mConfig.baseUrl,
			token:uni.getStorageSync('token'),
			duration: 2000,
			title: '你有1条新匹配信息，请至沟通匹配消息查看',
			type: 'warning',
			currentTab: 0,
			navScrollLeft: 0,
			iconXs: this.$mAssetsPath.iconXs,
			logoMask: this.$mAssetsPath.logoMask,
			defaultLogo: this.$mAssetsPath.defaultLogo,
			navData: [
				{
					id:1,
					text: '服务',
				},
				{
					id:2,
					text: '今日关注'
				},
				{
					id:3,
					text: '工作圈',
				},
				{
					id:4,
					text: '直通车'
				}
			],
			list: [],
			cityActive:false,
			area:'',
			area2:''
		};
	},
	onLoad() {
		//uni.removeStorageSync('havTip');
		console.log(uni.getStorageSync('havTip'));
		if(uni.getStorageSync('havTip') != 1){
			this.havTip = true;
		}else{
			this.havTip = false;
		}
	},
	onShow(){
		this.token = uni.getStorageSync('token');
		this.getList(this.current);
		//this.initPage();
		// #ifdef APP-PLUS			
		this.$tabbarView.$watch();
		// #endif
		// #ifdef H5
		uni.showTabBar();
		// #endif
	},
	onHide() {
		// #ifdef APP-PLUS
		this.$tabbarView.$watch();
		// #endif
	},
	mounted() {
		if(uni.getStorageSync('token')){
		this.showTips();
		}
	},
	onPullDownRefresh() {	
		setTimeout(function(){
			uni.stopPullDownRefresh();
		},1000)
	},
	onReachBottom() {
		this.reachBottom();
	},
	//导航按钮
	onNavigationBarButtonTap(obj) {
		//this.selectCity();
		this.cityActive = true;
	},
	//导航输入框	
	onNavigationBarSearchInputClicked () {
		this.toSearch();
   },
   onReady() {
	   console.log("isshowxy",uni.getStorageSync("isshowxy"));
   	if(!uni.getStorageSync("isshowxy"))  this.isShow = true;
   },
	methods: {		
		popupState(e){ //e->false取消 true确认
			if(e){
				uni.setStorageSync("isshowxy",true);
			}
		},
		closeTips(){
			uni.setStorageSync('havTip',1);
			this.havTip = false;
		},
		createtab: function() {
			//console.log('App onLoad');
			// 设置水平居中位置
			var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
			var view = new plus.nativeObj.View('icon', {
				bottom: '5px',
				left:  leftPos+'px',
				width: '60px',
				height: '60px'
			});
			view.drawBitmap(bitmap1,
				{
					tag: 'font',
					id: 'icon',
					//text: '\ue510', //此为字体图标Unicode码'\e600'转换为'\ue600'
					src: '../../static/img/add.png',
					position: {
						top: '0px',
						left: '5px',
						width: '50px',
						height: '100%'
					}
				}
			);
			view.addEventListener("click", function(e) {
					// uni.navigateTo({
					// 	url: '../tabBar/message'  //这里是点击中间按钮直接打开新的页面
					// });
					
				uni.switchTab({
					url: '../tabBar/release'
				})
			}, false);
			view.show();
		},
		reachBottom() {
			// 此tab为空数据
			if(this.tabNav[this.current].reqBody != undefined) this.tabNav[this.current].reqBody.index ++;
			this.loadStatus.splice(this.current,1,"loading");
			this.getList(this.current,true);
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
			this.getList(index);
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			// let dx = e.detail.dx;
			// this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			if(this.current != current){				
				this.getList(current);
			}
			//this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},		
		async getList(idx,ref){
			console.log(idx);
			if(!ref) this.tabNav[idx].reqBody.index = 1;
			let result = await this.$apis.indexSearch(this.tabNav[idx].reqBody);
			if(ref){					
				this.tabNav[idx].list = this.tabNav[idx].list.concat(result.data);
			}else{
				this.tabNav[idx].list = result.data;
			}
			if(result.data.length < 10){
				this.loadStatus.splice(idx,1,"nomore")
			}
		},
		cityChange(e) {
			let address = e.province.label
			this.area2 = e.province.label
			if(e.city){
				address = address + '-' + e.city.label;
				this.area2 = e.city.label
			}
			if(e.area){
				address = address + '-' + e.area.label;
				this.area2 = e.area.label
			}
			this.area = address
		},
		async findUserInfoOne() {
			let that = this;
			let data = await this.$apis.findUserInfoOne();
			if (data.data.userInfo !== null) {
					this.$store.commit('SET_USERINFO', data.data.userInfo);
			}
		},
		detailCompany(e){
			if(this.current == 2){
				this.$mRouter.push({
					route:this.$mRoutesConfig.teamPage,
					query:{
						id:e
					}
				});
			}else{
				this.$mRouter.push({
					route:this.$mRoutesConfig.releaseNumber,
					query:{
						id:e
					}
				});
			}
		},
		async initPage(){
			let result = await this.$apis.getIndustryCategoryByQy(this.reqBody);
			this.list = result.data;
		},
		async showTips() {
			let result = await this.$apis.unReadMatchMsg();
			if(result.data > 0){
				this.$refs.uTips.show({
					duration: this.duration,
					title: "你有"+result.data+"条新匹配信息，请至匹配消息查看",
					type: this.type
				});
				
			}
		},		
		toSearch(){
			this.$mRouter.push({
				route:this.$mRoutesConfig.search
			});
		},
		selectCity(){
			this.$mRouter.push({
				route: this.$mRoutesConfig.selectCity
			});
		},
		login(){
			uni.redirectTo({
				url: '../login/login'
			});
		},
		toTiao(index){
			if(index==3){
				this.$mRouter.push({
					route: this.$mRoutesConfig.throughTrain
				});
			}
			if(index==2){
				this.$mRouter.push({
					route: this.$mRoutesConfig.workcircle
				});
			}
			if(index==1){
				this.$mRouter.push({
					route: this.$mRoutesConfig.homeFollow
				});
			}
			if(index==0){
			uni.switchTab({
				url:'../tabBar/index'
			})
			}
			if(index == 4){
				this.$refs.uToast.show({
					title: '正在开发，敬请期待',
					type: 'success',
				})
			}
		}
		
	}
};
</script>

<style scoped lang="scss">
page {padding-top: 85rpx;}
page,.container {		
	background-color: #f4f4f4;
}
/* #ifndef H5 */

/* #endif */
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.top_view {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 999;
}
.fiexd-head {  
  position: fixed;
  top: 0;
  /* #ifdef H5 */
  top:80rpx;
  /* #endif */
  left: 0;
  z-index: 99;
  width:100%;
  height:82rpx;
}
.header {
	width: 750rpx;
	background: linear-gradient(0deg, #ac62ff, #df62ff);
}
.nav {
	width: 100%;
	padding: 15rpx 0 29rpx 0;
	box-sizing: border-box;
	overflow: hidden;
	font-size: 28rpx;
	white-space: nowrap;

	.nav-item {
		width: 25%;
		display: inline-block;
		text-align: center;
		color: #fff;
		&.active {
			color: #fff;
		}
	}
}
/* #ifdef APP-PLUS */
.home {padding-top:82rpx;}
/* #endif */
.f-title {
	background-color: #fff;
	padding: 32rpx 0;
	font-weight: 600;
	font-size: 38rpx;
	image {
		width: 30rpx;
		height: 33rpx;
		margin: 0 23rpx 0 30rpx;
	}
}
.f-list {
	align-items: center;
	background-color: #fff;
	padding: 24rpx 26rpx 36rpx 26rpx;
	.f-logo {
		width: 102rpx;
		height: 118rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		background-size: auto 100%;
		background-position: center center;
		background-repeat: no-repeat;
		overflow: hidden;
		image {
			width: 102rpx;
			height: 118rpx;
		}
	}
	.f-item {
		max-width:80%;
		.title {
			font-size: 30rpx;
			font-weight: 700;
		}
		.desc {
			font-size: 26rpx;
			color: #888d99;
		}
		.tips text {
			background: #f2f2f7;
			color: #888d99;
			padding: 5rpx 8rpx;
			font-size: 24rpx;
		}
	}
}
.tags {
    border: #FF9900 solid 0.5px;
    color: #FF9900;
    font-size: 12px;
    line-height: 12px;
    padding: 2px 6px;
    border-radius: 3px;
}
.mask-login {
	position: fixed;
	bottom: 200rpx;
	/* #ifdef H5 */
	bottom:248rpx;
	/* #endif */
	z-index: 2;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 32rpx;
	.btn-login {
		margin: 42rpx 30rpx;
		background: linear-gradient(0deg, #ab61ff, #df61ff);
		border-radius: 33px;
		padding: 21rpx 28rpx;
		font-size: 26rpx;
		color: #ffffff;
	}
}
.mask-tips {
	position: fixed;
	bottom: 100rpx;
	/* #ifdef H5 */
	bottom:148rpx;
	/* #endif */
	z-index: 2;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 32rpx;
	.btn-login {
		margin: 42rpx 30rpx;
		background: linear-gradient(0deg, #ab61ff, #df61ff);
		border-radius: 33px;
		padding: 21rpx 28rpx;
		font-size: 26rpx;
		color: #ffffff;
	}
}
.btn-bottom {
	position: fixed;	
	bottom: 50rpx;
	/* #ifdef H5 */
	bottom:130rpx;
	/* #endif */
	z-index: 2;
	left: 30rpx;
	width: 690rpx;
	padding: 25rpx 0;
	text-align: center;
	color: #fff;
	font-size: 32rpx;
	background: #ab61ff;
	border-radius: 40rpx;
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
.team-logo {
		width:108rpx;
		height:122rpx;
		text-align: center;
		background-size:cover;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
</style>
